;(function () {
    //获得浏览器支持的transform属性
    function getTransform(ele) {
        var transform = '',
            eleStyle = document.createElement('div').style,
            i = 0,
            transformArr = [
                'transform',
                'webkitTransform',
                'MozTransform',
                'msTransform',
                'OTransform'
            ],
            len = transformArr.length;
        for (; i < len; i++) {
            if (transformArr[i] in eleStyle) {
                transform = transformArr[i];
            }
        }
        //如果返回空，表示该浏览器不支持transform，则应该使用left,top等来替代，这是使用功能性来判断
        return transform;
    }
//获得元素的初始位置
    function getStyle(ele, property) {
        //兼容ie
        return document.defaultView.getComputedStyle(ele, false)[property] ?
            document.defaultView.getComputedStyle(ele, false)[property] :
            ele.currentStyle[property]; //IE
    }
    function getTargetPos(ele) {
        var pos = {x: 0, y: 0}
        var transform = getTransform();
        if (transform) {
            var transformValue = getStyle(ele, transform);
            if (transformValue === 'none') {
                ele.style[transform] = 'translate(0, 0)';
                return pos;
            } else {
                var temp = transformValue.match(/-?\d+/g);
                return pos = {
                    x: parseInt(temp[4].trim()),
                    y: parseInt(temp[5].trim())
                }
            }
        } else {
            if (getStyle(ele, 'position') == 'static') {
                ele.style.position = 'relative';
                return pos;
            } else {
                var x = parseInt(getStyle(ele, 'left') ? getStyle(ele, 'left') : 0);
                var y = parseInt(getStyle(ele, 'top') ? getStyle(ele, 'top') : 0);
                return pos = {
                    x: x, y: y
                }
            }
        }
    }
    function setTargetPos(el, pos) {
        var transform = getTransform();
        if (transform) {
            el.style[transform] = 'translate(' + pos.x + 'px,' + pos.y + 'px)';
        } else {
            el.style.left = pos.x + 'px';
            el.style.top = pos.y + 'px';
        }
        return el;
    }
    window.onload = function () {
        var el = document.querySelector('.div1');
        var startX = 0, startY = 0,
            sourceX = 0, sourceY = 0;
        el.addEventListener('mousedown', start, false);
        document.addEventListener('mousemove', move, false);
        document.addEventListener('mouseup', end, false);
        function start(e) {
            startX = e.pageX;
            startY = e.pageY;
            var pos = getTargetPos(el);
            sourceX = pos.x;
            sourceY = pos.y;
            //bind event
            document.addEventListener('mousemove', move, false);
            document.addEventListener('mouseup', end, false);
        }

        function move(e) {
            var currentX = e.pageX;
            var currentY = e.pageY;
            var distanceX = currentX - startX;
            var distanceY = currentY - startY;
            setTargetPos(el, {
                x: (sourceX + distanceX).toFixed(),
                y: (sourceY + distanceY).toFixed()
            })
        }

        function end(e) {
            document.removeEventListener('mousemove', move);
            document.removeEventListener('mouseup', end);
        }
    }
})()